import { useContext, useEffect, useState } from 'react'
import GlobalContext from './GlobalContext'
import Line from './Line'
import '../assets/battery.css'

const { setBatteryHt } = window.api.battery

function Battery(props) {
  let { avgLoaded, setAvgLoaded } = useContext(GlobalContext)

  useEffect(() => {
    setBatteryHt()
  }, [])

  useEffect(() => {
    window.topInfo[3] = props.batteryInf.percent
  }, [props.batteryInf.percent])

  return (
    <GlobalContext.Consumer>
      {(ctx) => {
        return (
          <div className="battery-container">
            {/* 容量信息 */}
            <div>
              <div className="battery-item">
                <span>
                  <span className="square" />
                  {ctx.t('designedCap')}
                </span>
                <span>
                  {props.batteryInf.designedCapacity} {props.batteryInf.capacityUnit}
                </span>
              </div>
              <div className="battery-item">
                <span>
                  <span className="square" />
                  {ctx.t('maxCap')}
                </span>
                <span>
                  {props.batteryInf.maxCapacity} {props.batteryInf.capacityUnit}
                </span>
              </div>
              <div className="battery-item">
                <span>
                  <span className="square" />
                  {ctx.t('curCap')}
                </span>
                <span>
                  {props.batteryInf.currentCapacity} {props.batteryInf.capacityUnit}
                </span>
              </div>
            </div>
            <Line />
            {/* 充电状态等信息 */}
            <div className="battery-charge-container">
              <div className="battery-charge-item">
                <span>
                  <span className="square" />
                  {ctx.t('batteryPer')}
                </span>
                <span className={props.batteryInf.percent <= 20 ? 'battery-red' : 'battery-green'}>
                  {props.batteryInf.percent}%
                </span>
              </div>
              <div className="battery-charge-item">
                <span>
                  <span className="square" />
                  {ctx.t('ac')}
                </span>
                <span>{props.batteryInf.acConnected ? ctx.t('yes') : ctx.t('no')}</span>
              </div>
              <div className="battery-charge-item">
                <span>
                  <span className="square" />
                  {ctx.t('charge')}
                </span>
                <span>{props.batteryInf.isCharging ? ctx.t('yes') : ctx.t('no')}</span>
              </div>
              <div className="battery-charge-item">
                <span>
                  <span className="square" />
                  {ctx.t('cycle')}
                </span>
                <span>{props.batteryInf.cycleCount}</span>
              </div>
              <div className="battery-charge-item">
                <span>
                  <span className="square" />
                  {ctx.t('voltage')}
                </span>
                <span>{props.batteryInf.voltage} V</span>
              </div>
              {/*<div className="battery-charge-item">*/}
              {/*  <span>*/}
              {/*    <span className="square" />*/}
              {/*    {ctx.t('manu')}*/}
              {/*  </span>*/}
              {/*  <span>{props.batteryInf.manufacturer}</span>*/}
              {/*</div>*/}
              {/*<div className="battery-charge-item">*/}
              {/*  <span>*/}
              {/*    <span className="square" />*/}
              {/*    Time Remaining*/}
              {/*  </span>*/}
              {/*  <span className={props.batteryInf.percent <= 20 ? 'battery-red' : 'battery-green'}>*/}
              {/*    {props.batteryInf.timeRemaining} hours*/}
              {/*  </span>*/}
              {/*</div>*/}
            </div>
            <Line />
          </div>
        )
      }}
    </GlobalContext.Consumer>
  )
}

export default Battery
